<template>
    <el-form :disabled="disabled">
        <el-form-item label="标题">
            <el-input v-model="dataRef.title"></el-input>
        </el-form-item>
        <el-form-item label="页面内容">
            <el-input type="textarea" v-model="dataRef.content.html"></el-input>
        </el-form-item>
        <el-form-item label="文本描述">
            <el-input v-model="dataRef.content_text"></el-input>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
import { IClubPageModel } from '@/headers/admin/model.h'
import { defineComponent, PropType, ref, watch } from 'vue'
export interface IClubPageFormProps {
    data:Partial<IClubPageModel>,
    disabled:boolean
}
export default defineComponent({
    props:{
        data:{
            type:Object as PropType<IClubPageModel>,
            required:false,
            default(){
                return {
                    title:"",
                    content_text:"",
                }
            }
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    emits:["update:data"],
    setup(props:IClubPageFormProps,ctx) {
        const dataRef = ref(props.data)
        if(!dataRef.value.content) {
            dataRef.value.content = {
                html:"",
                json:{},
                type:"html"
            }
            ctx.emit('update:data',dataRef.value);
        }
        watch(dataRef,(data)=>{
            ctx.emit('update:data',data);
        },{deep:true})
        return {
            dataRef
        }
    },
})
</script>
